<template>
  <div class="btns">
    <van-space :size="30">
      <!-- <van-button
        v-if="item.state === 4"
        type="primary"
        size="small"
        @click="handleSure(item.id)"
      >
        接单
      </van-button>
      <van-button
        v-if="item.state === 4"
        plain
        size="small"
        @click="handleBack(item.id)"
      >
        拒单
      </van-button> -->
      <van-button
        v-if="item.state === 5"
        type="primary"
        size="small"
        @click="handleStart(item.id)"
      >
        开始任务
      </van-button>

      <!-- <van-button
        v-if="item.state === 5"
        type="primary"
        size="small"
        @click="handleReceiveGuests(item.id)"
      >
        接客
      </van-button> -->

      <van-button
        v-if="[6, 7].includes(item.state) && !item.sign"
        type="primary"
        size="small"
        @click="handleSign(item.id)"
      >
        签名
      </van-button>

      <van-button
        v-if="item.state === 6"
        type="primary"
        size="small"
        @click="handleEnd(item.id)"
      >
        完结
      </van-button>
    </van-space>
  </div>
</template>

<script lang="ts" setup>
  import { ref, withDefaults, defineEmits, defineProps } from 'vue';
  import { showConfirmDialog, showSuccessToast } from 'vant';
  import { apiChangeState } from '@/api/driverWaitList';
  import ModalBack from '../ModalBack/index';
  import ModalStart from '../ModalStart/index';
  import ModalEnd from '../ModalEnd/index';
  import ModalSign from '../ModalSign/index';

  interface Props {
    item: any;
  }
  const props = withDefaults(defineProps<Props>(), {});
  const emit = defineEmits(['onHandleSuccess']);

  const handleEnd = (id: string) => {
    ModalEnd({
      id,
    }).then(() => {
      emit('onHandleSuccess');
    });
  };

  const handleSign = (id: string) => {
    ModalSign({
      id,
    }).then(() => {
      emit('onHandleSuccess');
    });
  };

  const handleStart = (id: string) => {
    ModalStart({
      id,
    }).then(() => {
      emit('onHandleSuccess');
    });
  };

  const handleBack = (id: string) => {
    ModalBack({
      id,
    }).then(() => {
      emit('onHandleSuccess');
    });
  };

  const handleReceiveGuests = (id: string) => {
    showConfirmDialog({
      title: '提示',
      message: '要执行接客操作吗？',
      beforeClose(action) {
        return new Promise<boolean>((resolve, reject) => {
          if (action === 'confirm') {
            apiChangeState({
              id,
              operate: 'receive_guests',
            })
              .then(() => {
                showSuccessToast('接客成功！');
                emit('onHandleSuccess');
                resolve(true);
              })
              .catch(() => {
                resolve(false);
              });
          } else {
            resolve(true);
          }
        });
      },
    });
  };

  const handleSure = (id: string) => {
    showConfirmDialog({
      title: '提示',
      message: '要执行确认操作吗？',
      beforeClose(action) {
        return new Promise<boolean>((resolve, reject) => {
          if (action === 'confirm') {
            apiChangeState({
              id,
              operate: 'confirm',
            })
              .then(() => {
                showSuccessToast('确认成功！');
                emit('onHandleSuccess');
                resolve(true);
              })
              .catch(() => {
                resolve(false);
              });
          } else {
            resolve(true);
          }
        });
      },
    });
  };
</script>

<style lang="less" scoped>
  .btns {
    padding: 20px;
    text-align: right;
  }
</style>
